import { useMemo, useCallback } from "react";
import { Image, View, Input } from "@tarojs/components";
import { FC } from "@tarojs/taro";
import { getItemForPk } from "@/config/product";
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";

const dstyles = GStyleSheet.create({
  container: {
    justifyContent: "space-between",
    height: "100rpx",
    background: "#fff",
    borderRadius: "8px",
    boxSizing: "border-box",
    padding: "20rpx",
    marginBottom: '24rpx'
  },
  icon: {
    width: "80rpx",
    height: "80rpx",
  },
  text: {
    fontSize: 16,
    color: DynamicColors.normalTextColor,
  },
  left: {
    display: "flex",
    alignItems: "center",
    gap: "12rpx",
  },
});

interface IProps {
  device: IDevice;
  onChangeName?: ({ device: IDevice, name: string }) => void;
}

const DeviceItem: FC<IProps> = ({ device, onChangeName }) => {

  const styles = dstyles.useDynamicStyle();

  const icon = useMemo(() => {
    const productInfo = getItemForPk(device.productKey) || {};
    return productInfo.icon;;
  }, [device.productKey]);

  const handleChangeText = useCallback((e) => {
    const text = e.detail.value;
    if (onChangeName) {
      onChangeName({ device, name: text });
    }
  }, [onChangeName, device]);

  return (
    <View style={styles.container} className='centerFlex'>
      <View style={styles.left}>
        <Image style={styles.icon} src={icon} />
        <Input style={styles.text} onInput={handleChangeText} value={device.name} />
      </View>
    </View>
  );
};

export default DeviceItem;
